<template>
  <div class="app-container">
    <!-- Header 区域 -->
    <my-header title="购物车案例"></my-header>

    <!-- 商品 Item 项组件 -->
    <my-goods
      v-for="item in cart"
      :key="item.id"
      :id="item.id"
      :title="item.goods_name"
      :thumb="item.goods_img"
      :price="item.goods_price"
      :count="item.goods_count"
      :state="item.goods_state"
      @stateChange="getState"
      @countChange="getCount"
    ></my-goods>

    <!-- Foote 区域 -->
    <my-footer></my-footer>
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader.vue";
import MyFooter from "./components/MyFooter.vue";
import MyGoods from "./components/MyGoods.vue";
import { mapActions, mapState } from "vuex";

export default {
  name: "App",
  created() {
    this.getCartList();
  },
  computed: {
    ...mapState("shopCar", ["cart"]),
  },
  methods: {
    ...mapActions("shopCar", ["getCartList"]),
    // 商品的选中状态发生了变化
    getState(e) {
      // {id: 1, value: false}
      console.log(e);
      this.$store.commit("shopCar/updateCartState", e);
    },
    // 商品的数量发生了变化
    getCount(e) {
      // {id: 1, value: 2}
      console.log(e);
      this.$store.commit("shopCar/updateCartCount", e);
    },
  },
  components: {
    MyHeader,
    MyFooter,
    MyGoods,
  },
};
</script>

<style lang="less" scoped>
.app-container {
  padding: 46px 0 50px 0;
}
</style>